<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ include file="/WEB-INF/pages/leftNavigation.jsp" %>

<c:url var="firstUrl" value="/resultProperty?categoryCode=${categoryCode }&pageSize=6&page=1" />
<c:url var="lastUrl" value="/resultProperty?categoryCode=${categoryCode }&pageSize=6&page=${products.totalPages}" />
<c:url var="prevUrl" value="/resultProperty?categoryCode=${categoryCode }&pageSize=6&page=${currentIndex - 1}" />
<c:url var="nextUrl" value="/resultProperty?categoryCode=${categoryCode }&pageSize=6&page=${currentIndex + 1}" />
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Real_Estate_4_Rent</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<link href="<c:url value="/resources/style/leftmenu.css"/>" rel="stylesheet" type="text/css" />
<link href="<c:url value="/resources/style/style_test.css"/>" rel="stylesheet" type="text/css" />
<!-- carousel bootstrap -->
<link href="<c:url value="/resources/bootstrap/bootstrap.min.css"/>" rel="stylesheet" type="text/css" />
<link href="<c:url value="/resources/bootstrap/carousel.css"/>" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.11.0.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resources/bootstrap/bootstrap.min.js"/>"></script>
<!-- select change value -->
<!-- <script>
$(document).ready(function(){
	sizePage = 6;
	$("#sizePage").change(function(event){
		sizePage = $("#sizePage").val();
   	  	alert("Size Page: " + sizePage);
   	  });
});
</script> -->
<!-- /select change value -->
<!-- /carousel bootstrap -->
<style>
.pagination {
height: 40px;
margin: 20px 0;
float: left;
}

.pagination ul {
display: inline-block;
margin-left: 0;
margin-bottom: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
padding: 0;
margin: 0 0 10px 25px;
}

.pagination ul > li {
display: inline;
line-height: 20px;
}

.pagination ul > li:first-child > a{
border-left-width: 1px;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}

.pagination ul > .disabled > a{
color: #999999;
background-color: transparent;
cursor: default;
}

.pagination ul > li > a{
float: left;
padding: 0 14px;
line-height: 38px;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #dddddd;
border-left-width: 0;
color: #01AEF2;
}

.pagination ul > li:last-child > a{
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}

.pagination ul > .disabled > a{
color: #999999;
background-color: transparent;
cursor: default;
}
</style>
</head>

<body>
<!--the left menu amazon-->
<!-- end the left menu-->

<!-- top navigation -->
<%@ include file="/WEB-INF/pages/topnavigation.jsp" %>
<!-- / top navigation -->
<div id="main_container">
  <div id="background_main">
    <div id="main">
      <!-- search form -->
      <%@ include file="/WEB-INF/pages/searchform.jsp" %>
      <!-- /search form -->
      <div id="hot_property">
        <div id="wrapper">
			<div id="container">
          		<c:if test="${not empty listNewProperty}">
          			<!-- carousel -->
            		<div id="myCarousel" class="carousel slide" data-ride="carousel">
            			<!-- Indicators -->
					  	<ol class="carousel-indicators">
				  			<c:forEach items="${listNewProperty }" varStatus="countIndicator">
								<li data-target="#myCarousel" data-slide-to="${countIndicator.count -1}" class=""></li>	    
							</c:forEach>
					  	</ol>
					  	<div class="carousel-inner">
					  			<c:forEach var="property" items="${listNewProperty }" varStatus="counter">
					  				<c:choose>
					  					<c:when test="${counter.count == 1}">
									    	<div class="item active">
									    	  <a href="productDetail/${property.id}">
											  	<img alt="${property.productName}" src="${pageContext.request.contextPath}/images${property.picture }">
											  </a>
											  <div class="container">
												<div class="carousel-caption">
												  <h4>${property.productName}</h4>
												</div>
											  </div>
											</div>
										</c:when>
										<c:otherwise>
											<div class="item">
												<a href="productDetail/${property.id}">
											  		<img alt="${property.productName}" src="${pageContext.request.contextPath}/images${property.picture }">
											  	</a>
											  	<div class="container">
													<div class="carousel-caption">
													  	<h4>${property.productName}</h4>
													</div>
											  	</div>
											</div>
										</c:otherwise>
								    </c:choose>
								</c:forEach>
						  </div>
						  <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
		  				  <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
            		</div>
					<!-- /carousel -->
				</c:if>
        	</div>
        </div>
      </div>
    </div> 		
		
		<!-- related product -->
		<c:if test="${not empty products.content}">
  	<div id="product_area" class="new_properties_area">
  		<div id="name_property">Search Results</div>
			<c:forEach var="product" items="${products.content }" varStatus="counter">
			    <c:choose>
			  	  <c:when test="${counter.count %2 != 0 && counter.count == fn:length(products.content)}">
						<div id="line2">
							<div id="col1">
								<a href="productDetail/${product.id }">
									<c:if test="${not empty product.picture }">
										<c:forTokens items="${product.picture }" delims=";" var="name" varStatus="counter">
											<c:choose>
												<c:when test="${counter.count == 1 && not empty name}">
													<div id="image_product" width="240px" height="150px" >
														<img src="${pageContext.request.contextPath}/images${name }" width="240px;" height="150px;">
													</div>
												</c:when>
											</c:choose>
										</c:forTokens>
									</c:if>
									<c:if test="${empty product.picture }">
										<div id="image_product" width="240px" height="150px" >
											<img src="#" alt="${product.productName }" width="240px;" height="150px;">
										</div>
									</c:if>
								</a>
								<div id="information_detail">
									<div id="characteristic_special" style="width: 100%;">${product.special} <div id="special_mark">*</div></div>
									<div id="characteristic" style="float:right;">Bedroom: ${product.bedroom}</div>
									<div id="characteristic">Room: ${product.room}</div>
									<div id="characteristic" style="width: 100%;">Sqft: ${product.sqft} sqm</div>
									<div id="characteristic" style="width: 100%;">Interior: ${product.brtbInterior.interiorName}</div>
									<div id="price">Price: 
										<div id="highlight">${product.price} USD/month</div>
									</div>
  									<div id="characteristic_favorite">
										<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
									</div>
								</div>
								<div id="address">Address: ${product.address}</div>
								<a href="productDetail/${product.id }">
						        <div id="address_detail">${product.productName}</div>
						        </a>
							</div>
						</div>
					</c:when>
			    	<c:when test="${counter.count %2 != 0}">
						<div id="line2">
							<div id="col1">
								<a href="productDetail/${product.id }">
									<c:if test="${not empty product.picture }">
										<c:forTokens items="${product.picture }" delims=";" var="name" varStatus="counter">
											<c:choose>
												<c:when test="${counter.count == 1 && not empty name}">
													<div id="image_product" width="240px" height="150px" >
														<img src="${pageContext.request.contextPath}/images${name }" width="240px;" height="150px;">
													</div>
												</c:when>
											</c:choose>
										</c:forTokens>
									</c:if>
									<c:if test="${empty product.picture }">
										<div id="image_product" width="240px" height="150px" >
											<img src="#" alt="${product.productName }" width="240px;" height="150px;">
										</div>
									</c:if>
								</a>
								<div id="information_detail">
									<div id="characteristic_special" style="width: 100%;">${product.special} <div id="special_mark">*</div></div>
									<div id="characteristic" style="float:right;">Bedroom: ${product.bedroom}</div>
									<div id="characteristic">Room: ${product.room}</div>
									<div id="characteristic" style="width: 100%;">Sqft: ${product.sqft} sqm</div>
									<div id="characteristic" style="width: 100%;">Interior: ${product.brtbInterior.interiorName}</div>
									<div id="price">Price: 
										<div id="highlight">${product.price} USD/month</div>
									</div>
  									<div id="characteristic_favorite">
										<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
									</div>
								</div>
								<div id="address">Address: ${product.address}</div>
								<a href="productDetail/${product.id }">
						        	<div id="address_detail">${product.productName}</div>
						        </a>
							</div>
					</c:when>
					<c:otherwise>
						<div id="col2">
								<a href="productDetail/${product.id }">
									<c:if test="${not empty product.picture }">
										<c:forTokens items="${product.picture }" delims=";" var="name" varStatus="counter">
											<c:choose>
												<c:when test="${counter.count == 1 && not empty name}">
													<div id="image_product" width="240px" height="150px" >
														<img src="${pageContext.request.contextPath}/images${name }" width="240px;" height="150px;">
													</div>
												</c:when>
											</c:choose>
										</c:forTokens>
									</c:if>
									<c:if test="${empty product.picture }">
										<div id="image_product" width="240px" height="150px" >
											<img src="#" alt="${product.productName }" width="240px;" height="150px;">
										</div>
									</c:if>
								</a>
								<div id="information_detail">
									<div id="characteristic_special" style="width: 100%;">${product.special} <div id="special_mark">*</div></div>
									<div id="characteristic" style="float:right;">Bedroom: ${product.bedroom}</div>
									<div id="characteristic">Room: ${product.room}</div>
									<div id="characteristic" style="width: 100%;">Sqft: ${product.sqft} sqm</div>
									<div id="characteristic" style="width: 100%;">Interior: ${product.brtbInterior.interiorName}</div>
									<div id="price">Price: 
										<div id="highlight">${product.price} USD/month</div>
									</div>
  									<div id="characteristic_favorite">
										<img src="<c:url value="/resources/images/favorite.jpg"/>" style="width:20px; height:20px;"/> &nbsp;Add favorites
									</div>
								</div>
								<div id="address">Address: ${product.address}</div>
								<a href="productDetail/${product.id}">
						        <div id="address_detail">${product.productName}</div>
						        </a>
						</div>
						</div>
					</c:otherwise>
				</c:choose>
	    	</c:forEach>
	    </div>
  </c:if>
		<!-- /related product -->
		<!--pagination-->
		<div id="product_area_pagination">
			<div class="pagination">
			    <ul>
			    	<c:choose>
			    		<c:when test="${products.totalPages >0}">
			    			<li><a style="color: #000000;">Page ${currentIndex } of ${products.totalPages}</a></li>
					        <c:choose>
					            <c:when test="${currentIndex == 1}">
					                <li class="disabled"><a>&lt;&lt;</a></li>
					                <li class="disabled"><a>&lt;</a></li>
					            </c:when>
					            <c:otherwise>
					                <li><a href="${firstUrl}">&lt;&lt;</a></li>
					                <li><a href="${prevUrl}">&lt;</a></li>
					            </c:otherwise>
					        </c:choose>
					        <c:forEach var="i" begin="${beginIndex}" end="${endIndex}">
					            <c:url var="pageUrl" value="/resultProperty?categoryCode=${categoryCode }&pageSize=6&page=${i }" />
					            <c:choose>
					                <c:when test="${i == currentIndex}">
					                    <li class="active disabled"><a href="${pageUrl}"><c:out value="${i}" /></a></li>
					                </c:when>
					                <c:otherwise>
					                    <li><a href="${pageUrl}"><c:out value="${i}" /></a></li>
					                </c:otherwise>
					            </c:choose>
					        </c:forEach>
					        <c:choose>
					            <c:when test="${currentIndex == products.totalPages || products.totalPages == 0 }">
					                <li class="disabled"><a>&gt;</a></li>
					                <li class="disabled"><a>&gt;&gt;</a></li>
					            </c:when>
					            <c:otherwise>
					                <li><a href="${nextUrl}">&gt;</a></li>
					                <li><a href="${lastUrl}">&gt;&gt;</a></li>
					            </c:otherwise>
					        </c:choose>
					        <!-- <li>
					        	<a  style="color: #000000;">Display #
									<select name="sizePage" id="sizePage" style="width: 60px; border: 1px solid #cccccc; background-color: #ffffff; padding: 4px 6px;color: #555555;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;">
										<option>6</option>
										<option>12</option>
										<option>18</option>
										<option>24</option>
									</select>
								</a>
					        </li> -->
		    			</c:when>
			    		<c:otherwise>
			    			<li><a style="color: #000000;">No results</a></li>
		    			</c:otherwise>
			    	</c:choose>
			    </ul>
			</div>
		</div>
		<!-- /pagination -->
	</div>
</div>
<!--end main_container-->
	<div id="product_area_footer" class="villa_area">
		<div id="name_property_footer">
			<div id="option_menu">
				<ul id="nav">
				  <li><a href="#">passport</a></li>
				  <li><a href="#">hotel</a></li>
				  <li><a href="#">rent car</a></li>
				  <li><a href="#">school</a></li>
				</ul>
			</div>
		</div>		
	</div>
	<div id="fullsupport">
		<strong>For more information contact with Mr Phuc: 0904 674 199</strong>
	</div>
</body>
</html>
